<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="wap-font-scale" content="no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <script src="./js/rem_count.js"></script>
    <title>专属关怀包</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/pop.css">
</head>

<body>
    <div id="main">
        <p class="toast"></p>
        <div class="topBg"></div>
        <div class="rule" onclick="clickRule()"><img src="./images2/ruleBtn.png" alt=""></div>
        <div class="logBox"> <a href="./redpacket.html"> <img src="./images2/logBox.png" alt=""></a></div>
        <!-- 轮播 -->
        <!-- <div class="swiper-container banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/banner1.png" alt=""></div>
                <div class="swiper-slide"><img src="./images/banner2.png" alt=""></div>
                <div class="swiper-slide"><img src="./images/banner3.png" alt=""></div>
            </div>
        </div> -->
        <!-- 内容详情 -->
        <div class="detailBlock">
            <div class="topBtn">
                <div class="btn leftBtn on">给TA充话费</div>
                <div class="btn rightBtn">给TA办流量</div>
            </div>
            <div class="detailBoxOne">
                <div class="title titleTop">
                    请输入您要赠送话费的电话号码
                </div>
                <div class="phoneBox">
                    <input type="text" class="phoneVal" placeholder="请输入正确的青海移动号码">
                    <label for=""></label>
                </div>
                <div class="redPackBox">
                    <div class="redPackItem on">
                        <div class="money">10元</div>
                        <div class="msg">必戴口罩</div>
                    </div>
                    <div class="redPackItem">
                        <div class="money">20元</div>
                        <div class="msg">减少串门</div>
                    </div>
                    <div class="redPackItem">
                        <div class="money">30元</div>
                        <div class="msg">拒吃野味</div>
                    </div>
                    <div class="redPackItem">
                        <div class="money">50元</div>
                        <div class="msg">勤快洗手</div>
                    </div>
                    <div class="redPackItem">
                        <div class="money">100元</div>
                        <div class="msg">拒绝谣言</div>
                    </div>
                    <div class="redPackItem">
                        <div class="money">200元</div>
                        <div class="msg">配合查验</div>
                    </div>
                </div>
                <div class="adBanner">
                    <!-- <img src="./images/adBanner.png" alt=""> -->
                    <div class="adBg"></div>
                </div>
            </div>
            <div class="detailBoxtwo">
                <div class="title">
                    请选择您要发送的关怀短信
                </div>
                <div class="detailContent">
                    <div class="leftNav">
                        <div class="leftBtn active">给家人</div>
                        <div class="leftBtn">给父母</div>
                        <div class="leftBtn">给朋友</div>
                        <div class="leftBtn">给爱人</div>
                        <div class="leftBtn">给孩子</div>
                        <div class="leftBtn">给同事</div>
                    </div>
                    <div class="rightCon">
                        <div class="msgBox">
                            相信国家，相信科学，不轻信谣言，不散布谣言。响应国家命令，做到无事不出门，出门戴口罩。
                            <!-- 母后/父皇新年出行，平安是辇，幸福为舆;吉祥华盖，如意执扇;快乐做旗，甜蜜为幡;温馨侍卫，财神护驾;众人呼你万岁，你说不妥，只要天天快乐，千岁即可。 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bannerB">
            <!-- <div class="watch">查看详情</div> -->
            <a href="https://promo.guahao.com/topic/pneumonia?_cp=yidong_qh">
                <img src="./images2/bottonBanner.png" alt="">
            </a>
            
        </div>
        <div class="submit">
            <div class="submitBtn">立即为TA充值并发送短信</div>
        </div>

        <!-- 弹窗 -->
        <div class="pop" >
            <!-- 活动规则 -->
            <div class="rulePop popContent">
                <img src="./images/close.png" class="close" onclick="closePop()" alt="">
                <h3 class="title">活动规则</h3>
                <div class="popDetail">
                    <p>1、活动时间2月4日起；</p>
                    <p>2、定向流量包自成功赠送之日起15天内有效，收到多人赠送定向流量包，流量可叠加使用；</p>
                    <p>3、此活动仅限青海移动实名制用户参与，欠费/停机等状态异常号码无法参与活动；被赠送用户仅限青海移动实名制用户，被赠送用户欠费/停机等状态异常号码话费可成功赠送，定向流量包不可成功赠送；</p>
                    <p>4、定向流量包办理仅支持话费支付，请确保手机话费余额充足，否则无法完成赠送；</p>
                    <p>5、此活动不限制赠送次数，可同时赠送多人；</p>
                    <p>6、请客户在赠送前仔细核对手机号码，赠送成功无法退款；</p>
                    <p>7、了解更多业务规则，详询10086。</p>
                </div>
            </div>
            <!-- 话费支付 -->
            <div class="hfpayPop popContent payPop">
                <img src="./images/close.png" class="close" onclick="closePop()" alt="">
                <h4 class="payTitle">请确认以下信息</h4>
                <div class="payDetailOne">
                    <div class="payDetail">
                        <!-- <div>
                            受赠号码：<span>18797194717</span>
                        </div>
                        <div>
                            充值金额：<span>20.20元（鼠年大吉）</span> 
                        </div>
                        <div>
                            短信祝福：<span>给家人</span> 
                        </div>
                        <div>
                            请选择支付方式：
                            <div class="payWay">
                                <div class="wxPay payWayBLock on">
                                    <i class="payIcon "></i>
                                    <i></i>
                                    微信支付
                                </div>
                                <div class="zfbPay payWayBLock">
                                    <i class="payIcon"></i>
                                    <i></i>
                                    支付宝支付
                                </div>
                            </div>
                        </div> -->
                    </div>
                    <div class="submitPay">确认支付</div>
                </div>
                <div class="payDetailTwo">
                    <div class="payDetail">
                    </div>
                    <div class="submitPay">确认支付</div>
                </div>

            </div>

            <!-- 二次确认 -->
            <div class="secondPayPop popContent"  >
                
            </div>
            <!-- 支付失败 -->
            <div class="payFalse popContent">
                <img src="./images/close.png" class="close" onclick="closePop()" alt="">
                <div class="payFalseVal"></div>
            </div>
            <!-- 介绍 -->
            <div class="intPop popContent">
            <img src="./images/close.png" class="close" onclick="closePop()" alt="">
            <h3 class="title">定向流量包使用说明</h3>
            <div class="popDetail">
                <p>1、业务规则</p>
                <p>（1）定向流量包自成功赠送之日起15天内有效，收到多人赠送定向流量包，流量可叠加使用；</p>
                <p>（2）定向流量仅供被赠送手机使用，使用范围为国内（不含港澳台）；</p>
                <p>（3）请在WiFi功能关闭下使用免流功能，避免WiFi和移动网络频繁导致免流量服务启动失败；</p>
                <p>（4）定向流量包赠送成功后15天结束清零，不可分享，不可转赠。</p>
                <p>2、免流规则</p>
                <p>【快手】</p>
                <p>客户端需要升级到安卓andriod5.10.1及以上、iOS 5.10.2.716及以上。中国移动2G/3G/4G网络下，访问快手APP中的直播及短视频内容，但不包括以下内容：</p>
                <p>（1）客户端内上传与图片、标题/评论/消息/私信等文本信息加载、直播中礼物素材加载、第三方网页浏览产生的流量。</p>
                <p>（2）手机号码处于国际或港澳台地区漫游状态下产生的流量。</p>
                <p>（3）利用手机设置代理服务器或VPN等方式，访问APP所产生的流量。</p>
                <p>（4）用无线上网卡、平板电脑、CPE、MIFI等非手机设备使用产生的流量。</p>
                <p>（5）手机作为热点使用产生的流量。</p>
                <p>（6）使用CMWAP接入点方式，访问APP所产生的流量。</p>
                <p>【抖音】</p>
                <p>抖音短视频、今日头条客户端需要升级到最新版本， APP中第三方广告、弹幕、直播类视频上传、在线观看／下载／缓存第三方视频所产生的流量不包含在内。</p>
                <p>【爱奇艺】</p>
                <p>中国移动2G／3G／4G网络下，访问爱奇艺手机客户端（V96.5及以上版本）中的特定视频内容。但不包括以下内容：</p>
                <p>（1）手机客户端内播放、下载第三方视频，浏览H5页面及播放、下载H5页面内视频;阅读小说、漫画等内容。</p>
                <p>（2）使用腾讯视频手机客户端下载/缓存视频所产生的流量。</p>
                <p>【优酷】</p>
                <p>中国移动2G／3G／4G网络下，访问优酷视频手机客户端中的特定视频内容。但不包括以下内容：</p>
                <p>（1）客户端启动、登录及客户端内的图片、文字、视频内插播广告、弹幕、第三方广告、主播类视频、在线观看／下载／缓存第三方视频等。</p>
                <p>其他说明：</p>
                <p>（2）土豆视频（IOS6.5.2或安卓6.5.1及之后版本）的视频内容。</p>
                <p>（3）使用优酷视频手机客户端下载/缓存视频所产生的流量。</p>
                <p>【腾讯】</p>
                <p>中国移动2G／3G／4G网络下，访问腾讯视频手机客户端（5.6.2版本及其以上版本）中的特定视频内容。但不包括以下内容：</p>
                <p>（1）客户端启动、登录及客户端内的图片、文字、视频内插播广告、弹幕、第三方广告、主播类视频、在线观看／下载／缓存第三方视频等。</p>
                <p>（2）使用腾讯视频手机客户端下载/缓存视频所产生的流量。</p>
            </div>
        </div>
        </div>
    </div>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
    <script>
        
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });
    var status = 1; //初始化状态为1
    var redStatus = 0; //初始化红包选中为1
    var greetStuts = 0; //初始化祝福语
    var isTrue = 2; //支付成功 1成功 2余额不足 3 失败
    //点击流量
    $(".topBtn .rightBtn").click(function(){
        $(".titleTop").html('请输入您要赠送流量的电话号码')
        $(".submitBtn").html('立即为TA办理并发送短信')
        status = 2;
        greetStuts = 0;
        $(this).addClass('on');

        $(".adBanner,.payDetailTwo").show();
        $(".redPackBox,.payDetailOne").hide();
        $(".msgBox").html(`
            ${data7[0].msg}
        `)
        $(".leftNav .leftBtn").eq(0).addClass("active").siblings().removeClass("active")
    })
    $(".topBtn .btn").click(function(){
        $(this).addClass('on').siblings().removeClass('on');
    })
    //点击话费
    $(".topBtn .leftBtn").click(function(){
        $(".titleTop").html('请输入您要赠送话费的电话号码')
        $(".submitBtn").html('立即为TA充值并发送短信')
        greetStuts = 0;
        status = 1;
       
 

        $(".adBanner,.payDetailTwo").hide();
        $(".redPackBox,.payDetailOne").show();
        $(".msgBox").html(`
            ${data1[redStatus].msg}
        `);
        $(".leftNav .leftBtn").eq(0).addClass("active").siblings().removeClass("active")
    })

    //点击切换红包
    $(".redPackBox .redPackItem").click(function(){
        var index = $(this).index() ;
        redStatus = index;
        console.log(greetStuts)
        $(this).addClass('on').siblings().removeClass('on')
        switch (redStatus){
            case 0:
                $(".msgBox").html(`
                    ${data1[greetStuts].msg}
                    `
                )
            break;
            case 1:
                $(".msgBox").html(`
                    ${data2[greetStuts].msg}
                    `
                )
            break;
            case 2:
                $(".msgBox").html(`
                    ${data3[greetStuts].msg}
                    `
                )
            break;
            case 3:
                $(".msgBox").html(`
                    ${data4[greetStuts].msg}
                    `
                )
            break;
            case 4:
                $(".msgBox").html(`
                    ${data5[greetStuts].msg}
                    `
                )
            break;
            case 5:
                $(".msgBox").html(`
                    ${data6[greetStuts].msg}
                    `
                )
            break;
        }
    })
    //切换祝福语
    $(".leftNav .leftBtn").click(function(){
        greetStuts = $(this).index(); //选中的下标
        $(this).addClass('active').siblings().removeClass('active');
        if(status == 1){
            switch (redStatus){
                case 0:
                    $(".msgBox").html(`
                        ${data1[greetStuts].msg}
                        `
                    )
                break;
                case 1:
                    $(".msgBox").html(`
                        ${data2[greetStuts].msg}
                        `
                    )
                break;
                case 2:
                    $(".msgBox").html(`
                        ${data3[greetStuts].msg}
                        `
                    )
                break;
                case 3:
                    $(".msgBox").html(`
                        ${data4[greetStuts].msg}
                        `
                    )
                break;
                case 4:
                    $(".msgBox").html(`
                        ${data5[greetStuts].msg}
                        `
                    )
                break;
                case 5:
                    $(".msgBox").html(`
                        ${data6[greetStuts].msg}
                        `
                    )
                break;
            }
        }else{
            $(".msgBox").html(`
            ${data7[greetStuts].msg}
            `)
        }

    })

    $(".submitBtn").click(function(){
        var phoneVal = $(".phoneVal").val();
        var reg = /(1[3-9]\d{9}$)/;
        if(!phoneVal){
            animation("请输入手机号码")
            return false
        }
        if (!reg.test(phoneVal)){
            animation("请输入正确格式的手机号码！");
            return false;
        }
        if(status == 1){
           $(".pop,.hfpayPop,payDetailOne").show();
           $(".payDetailTwo").hide()
           $(".payDetailOne .payDetail").html(`
                    <div>
                        受赠号码：<span>${phoneVal}</span>
                    </div>
                    <div>
                        充值金额：<span>${moneyNum[redStatus]}</span> 
                    </div>
                    <div>
                        关怀短信：<span>${data1[greetStuts].title}</span> 
                    </div>
                    <div>
                        请选择支付方式：
                        <div class="payWay">
                            <div class="wxPay payWayBLock on">
                                <i class="payIcon "></i>
                                <i></i>
                                微信支付
                            </div>
                            <div class="zfbPay payWayBLock">
                                <i class="payIcon"></i>
                                <i></i>
                                支付宝支付
                            </div>
                        </div>
                    </div>
           `)
            //点击支付方式切换
            $(".payWay .payWayBLock").click(function(){
                $(this).addClass('on').siblings().removeClass('on')
            })
           $(" .payDetailOne .submitPay").click(function(){
                if(isTrue != 1){
                    $(".hfpayPop").hide();
                    $(".secondPayPop").show()
                    $(".secondPayPop").html(`
                        <img src="./images/close.png" class="close" onclick="closePop()" alt="">
                        <div class="secondTitle">支付成功！</div>
                        <div class="secondDetail">赠送给TA的话费以对方收到的短信为准，并且已将您选取的关怀短信发送给TA。</div>
                        <div class="secondBtn" onclick="secondBtn()">告诉TA</div>
                    `)
                }else {
                    $(".hfpayPop").hide();
                    $(".payFalse").show();
                    $(".payFalseVal").html('支付失败!')
                }
           })
           return false
        }else{
            $(".pop,.hfpayPop,.payDetailTwo").show();
            $(".payDetailOne").hide()
            $(".payDetail").html(`
                <div>
                    受赠号码：<span>${phoneVal}</span>
                </div>
                <div>
                    赠送产品：<span>20GB定向流量包</span> 
                </div>
                <div>
                    关怀短信：<span>${data1[greetStuts].title}</span> 
                </div>
                <div>
                    支付方式：<span>话费支付</span>
                </div>
                <div>支付号码：13897207914</div>
           `)
           $(".payDetailTwo .submitPay").click(function(){
                if(isTrue == 1){
                    $(".hfpayPop").hide();
                    $(".secondPayPop").show()
                    $(".secondPayPop").html(`
                        <img src="./images/close.png" class="close" onclick="closePop()" alt="">
                        <div class="secondTitle">支付成功！</div>
                        <div class="secondDetail">您已成功赠送20GB定向流量包，并且已将您选取的关怀短信发送给TA。</div>
                        <div class="secondBtn" onclick="secondBtn()">告诉TA</div>
                    `)
                }else if(isTrue == 2){
                    $(".hfpayPop").hide();
                    $(".secondPayPop").show()
                    $(".secondPayPop").html(`
                        <img src="./images/close.png" class="close" onclick="closePop()" alt="">
                        <div class="secondTitle">支付失败！</div>
                        <div class="secondDetail">话费余额不足，请先补充你的话费！</div>
                        <div class="secondBtn" onclick="getMoney()">去充值</div>
                    `)
                }else{
                    $(".hfpayPop").hide();
                    $(".payFalse").show();
                    $(".payFalseVal").html(`
                        <div>支付失败！</div>
                        <div class="tips">详询10086！</div>
                    `)
                }
               
           })
           return false
        }
    })

    //点击关闭
    window.closePop = function(){
        $(".pop, .popContent").hide()
    }
    //二次弹窗确认
    window.secondBtn = function(){
        $(".pop, .popContent").hide()
    }

    //去充值
    window.getMoney = function(){
        $(".pop, .popContent").hide()
    }

    function clickRule(){
        $(".pop,.rulePop").show()
    }

    //点击免流范围
    $(".adBg").click(function(){
        $(".pop, .intPop").show()
    })
    </script>
</body>

</html>